import React from 'react';
import {
  Link
} from 'react-router-dom';
import '../../collect/collect.scss';
import { getNotices } from 'api/user.js';
import SystemCard from './system/systemCard.jsx';
import LazyLoad from 'react-lazyload';
import LogisticsCard from './logistics/logisticsCard.jsx';
class Message extends React.Component{
	constructor (props) {
		super(props)
		this.state={
			messageList: ['交易物流', '系统消息'],
			messageNum: 0,
			messList: []
		}
	}
	show (index) {
		this.setState({
			messageNum: index
		},() => {
			if(this.state.messageNum === 0){
				// this._getCollectionList (1)
			} else {
				this._getNotices()
			}
		})
	}
	_getNotices () { //用户通知中心接口
		getNotices().then(res => {
			if (res.code === 1){
				this.setState({
					messList: res.data.data
				})
			} else if(res.code === -403){
				this.props.history.push({
            pathname: '/login'
          })
			}
		})
	}
	componentDidMount () {
		// this._getNotices()
	}
	render() {
		return (
			<div className='collect'>
				<div className="collect_title">
					<Link to="/user"><i className="glyphicon glyphicon-back"></i></Link>
					<span>通知中心</span>
				</div>
				<div className="collect_card">
				{
					this.state.messageList.map((item,index) => {
						return(
							<div className={this.state.messageNum === index && 'active'} onClick={this.show.bind(this,index)} key={index}>{item}</div>
						)
					})
				}
				</div>
				<div className="collect_content">
				{
					this.state.messageNum === 0 ?
					<div>
						<LogisticsCard/>
						<LogisticsCard/>
						<LogisticsCard/>
						<LogisticsCard/>
						<LogisticsCard/>
						<LogisticsCard/>
					</div>
					:
					<div>
						{this.state.messList.map((item, index) => {
              return (
                <LazyLoad offsetTop={200} key={index} height={0}>
                  <SystemCard systemInfo={{...item}}/>
                </LazyLoad>
              )
            })}
					</div>
				}
				</div>
			</div>
		)
	}
}
export default Message;
